Hace unos días para responder a una pregunta estuve probando la forma de añadir un marco a todas las imágenes de los post. El marco es una imagen más o menos como el ejemplo que ilustra la entrada y lógicamente como se trata de una imagen es necesario que todas las imágenes de los post tenga la misma medida a no ser que en alguna ocasión prescindamos de ese marco utilizando html.

La idea, lo que se tenía muy claro era no tener que utilizar ningún código cada vez, ni tan siquiera añadiéndolo a la plantilla de entrada, la idea era subir la imagen en un post y que automáticamente se visualizara con el marco.

Y claro, una a veces piensa,  incluso piensa detenidamente como si en lugar de pensar estuviéramos descubriendo la rueda. Luego de pensar y probar hice lo de otras veces consultar  esferas superiores es decir Vagabundia porque allí además de pensar siempre dan buenos remedios como en este caso .

 Para empezar estaría bien saber que la parte que añade estilos a los bordes en las imágenes de los post viene representada en la plantilla más o menos así:

.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
.tr-caption-container img {
border: none;
padding: 0;
}

 De todo eso se podría prescindir ya que con lo siguiente sería suficiente

.post-body img {
padding:4px;
border:1px solid $bordercolor;
}

Con lo anterior ya podemos añadir estilos a los bordes, y no sólo es suficiente sino que de esa forma el borde sólo se añade a las imágenes subidas a los pots, lógicamente en post.body img tendríamos que añadir nuestros estilos de borde pero no en este caso que le vamos a añadir una imagen.

En este caso dejamos esa parte así:

.post-body img {
padding:0;
}

Antes de seguir guardamos los cambios y nos situamos en el editor de entradas, subimos una imagen y en html nos da un código así:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-58cdBf6KvCg/Tge6rZPwqdI/AAAAAAAARUk/UEmVRfdpA3o/s320/27-6-2011+1.6.43+1.jpg" imageanchor="1" style=""><img border="0" height="300" width="400" src="http://1.bp.blogspot.com/-58cdBf6KvCg/Tge6rZPwqdI/AAAAAAAARUk/UEmVRfdpA3o/s400/27-6-2011+1.6.43+1.jpg" /></a></div>

Si nos fijamos Blogger añade una clase "class="separator" aprovechamos esa clase y en la plantilla añadimos justo antes de ]]></b:skin>

.separator {
height: 300px;
margin: 0 auto !important;
position: relative;
width: 400px;
}
.separator:after {
content: url("url-imagen-del-marco-400x300");
left: 0;
position: absolute;
top: 0;
}


Para el ejemplo he creado unos marcos de 400px ancho x 300px alto, esa es la medida que añadimos en los estilos de separator. Si deseamos mostrar nuestras imágenes de distinto tamaño cuidaremos que también ese tamaño coincida con la anchura y altura en los estilos.

Si el marco fuera una imagen desigual es posible que tengamos que hacer ajustes hasta ubicar la imagen en el centro del marco.

En la entrada no tenemos que añadir nada, simplemente subimos la imagen y ajustamos la medida indicada en Edición de HTML y listo.
<imgborder="0"height="300"width="400"src="http://1.bp.blogspot.com/-58cdBf6KvCg/Tge6rZPwqdI/AAAAAAAARUk/UEmVRfdpA3o/s400/27-6-2011+1.6.43+1.jpg" />
Unknown

La consulta a la esfera te saldrá algún dinerillo :P

Buena semana amiga, besos!

Responder
Unknown

Hola Gema, me dijistes que para hacer los post resumidos como tú, que visite está página: http://vagabundia.blogspot.com/2009/10/resumen-posts-2-extractos-del-texto.html

Ya lo he puesto pero me puedes decir que cambiastes del código para que también te funcionara en las entradas de la página principal?

Gracias de todos modos.

Responder
Gem@

:: Por ahora gratuitas Graciela no le demos ideas :)
Feliz semana para ti también ;)

:: P10 ese enlace que pasé forma parte del tutorial y es así como funciona aunque no sé a que te refieres en concreto porque no puedo ver tu blog :S

Responder
Brendi

Gema, ¿ves que a tu derecha en el gadget de 'los archivos' al hacer click se ve el menú de meses y de entradas? me ayudarías a hacer eso?
GRACIAS (:

Responder
Marisol

Gema, en la parte derecha de la página tienes como un icono que al dar un click te sube hasta arriba del blog, ¿me podrias explicar como ponerlo en mi blog? Gracias!

Responder
Anónimo

Hola Gema, quería saludarte y mostrarte como va quedando el blog en el que me ayudaste con el menú minimalista.
Claro, aún no he empezado a publicar mis trabajos, lo cual haré con calma.
Esta vez no voy a preguntarte nada, solo agradecerte por el maravilloso trabajo que haces en este blog, y por estar en esta "esfera superior", pero accesible para los que estamos aún más abajo.

Muchas gracias. :)
feromenoi.blogspot.com

Responder
Henry Herrera

@Marisol

El que dices es
gemablog-.blogspot.com/2011/03/seguimos-subiendo.html

Quizas tambien te pueda interesar


gemablog-.blogspot.com/2009/04/subir-y-bajar-con-efecto-deslizante.html

Responder
Marisol

Muchísimas gracias Henry!

Responder
Gem@

:: Bren la forma de mostrar los archivos con efecto deslizante la puedes ver en la siguiente url:
http://gemablog-.blogspot.com/2009/10/efecto-toggle-en-los-gadgets-de-la.html

:: Marisol ya respondió Henry tan amable como de costumbre y vi el cotro comentario tuyo ya mismo lo reviso :)

:: Ohhh Fero mi esfera está muy aquí en la tierra son otras las que adquieren por su sabiduría espacios superiores. El diseño está quedando muy bello minimalista 100%
Gracias por comentar :D

:: Henry Herrera muchas gracias por colaborar :D se agradece !!

Responder
Henry Herrera

De nada Gemma, pero no se compara con la gran ayuda que nos haz brindado x 5 añitos, por cierto ya termine la plantilla de mi blog del cual aprendi mucho en el camino y con tu ayuda ya esta terminado y montado.

hay te dejo el link: www.PresenciaDivina.info

Responder
Gem@

:: Buen trabajo Henry nadie diría que se trata de la plantilla Minima, estarás de acuerdo conmigo que es la plantilla ideal para personalizar.
Por cierto ese menú oculto te lo voy a copiar :)

Responder
Henry Herrera

Definitivamente recomendada la plantilla minima.
El menu oculto te ayuda a que tu blog no se vea tan cargado, aqui te dejo el enlace, no me extrañaria que lo puedas mejorar

http://ciudadblogger.com/2011/01/menu-deslizante-arriba-del-blog.html

Responder
Gem@

:: Gracias Henry por el detallazo :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top